<!--
 * @Description: 
 * @Author: Xiaochuan-W
 * @Date: 2023-10-16 10:41:13
 * @LastEditors: Xiaochuan-W
 * @LastEditTime: 2023-11-01 14:04:29
-->
<template>
	<XConfigProvider>

		<el-select
			ref="refSelect"
			v-model="data"
			clearable
			style="width: 100%"
			v-bind="$attrs"
			@click="clickFunc"
			@clear="clearFunc"
			@remove-tag="removeTagFunc"
		>
			<el-option
				v-for="(val, index) in dataList"
				:key="index"
				style="height: auto"
				:label="
					$attrs && $attrs.listProps ? val[($attrs.listProps as any).label] : val.name
				"
				:value="
					$attrs && $attrs.listProps ? val[($attrs.listProps as any).value] : val.id
				"
			></el-option>
		</el-select>
	
		<el-dialog v-model="dialogVisible" title="请选择" width="60%">
			<XTransfer v-model="transferData" v-bind="$attrs"></XTransfer>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="confirm">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</XConfigProvider>
</template>

<script setup lang="ts">
import XConfigProvider from '../XConfigProvider/index.vue'
import {ref,watch,useAttrs} from 'vue'
import {ElSelect,ElOption,ElButton,ElDialog} from 'element-plus'
import XTransfer from '../XTransfer/index.vue';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: Array,
		default() {
			return [];
		}
	}
});

const attrs = useAttrs();

const dialogVisible = ref(false);
const dataList = ref<any>([]);
const transferData = ref<any>([]);

function confirm() {
	dataList.value = transferData.value;
	emit('update:modelValue', dataList.value);
	getData();
	dialogVisible.value = false;
}
function clickFunc() {
	dialogVisible.value = true;
	transferData.value = dataList.value;
}
function clearFunc() {
	dataList.value = [];
	emit('update:modelValue', dataList.value);
}
function removeTagFunc(id: any) {
	dataList.value = dataList.value.filter((val: any) => {
		return attrs.listProps
			? val[(attrs.listProps as any).value] !== id
			: val.id !== id;
	});
	emit('update:modelValue', dataList.value);
}

const data = ref<any>();
getData();
function getData() {
	const ids = props.modelValue.map((val: any) => {
		return attrs.listProps ? val[(attrs.listProps as any).value] : val.id;
	});
	data.value = attrs.multiple ? ids : ids[0];
	dataList.value = props.modelValue;
}
watch(
	() => props.modelValue,
	() => {
		getData();
	}
);
</script>

<style lang="scss" scoped>
:deep(.el-dialog__header){
  margin-left: 16px!important;
  padding: 20px 0 10px!important;
  position: relative;
	margin-right: 80px;
}
:deep(.el-dialog__header::after){
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background-image: url('../images/dashed-bg.png');
}
:deep(.el-dialog__title){
  position: relative;
  padding-left: 12px;
  color: #3d6cfe!important;
  font-family: SourceHanSansCN-Bold;
}
:deep(.el-dialog__title::before){
  content: '';
  width: 4px;
  height: 18px;
  background-color: #3d6cfe;
  position: absolute;
  top: 0px;
  left: 0px;
}
:deep(.el-dialog__headerbtn){
  width: 16px;
  height: 16px;
  top: 21px;
}
</style>
